<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div style="position:absolute;width:100px;height:100px;border:1px solid #ddd;">X:<span>0</span>,Y:<span>0</span></div>
    <script>
        var click_elem = null;
        var click_oldelem = null;
        var target = {
            x:0,
            y:0,
            vx:0,
            vy:0,
        };

        //三种类型
        var type = 3;


        $("div").bind("mousedown",function(event){
            click_oldelem = $(this);
            switch(type){
                case 1: click_elem = click_oldelem;break;
                case 2: click_elem = $(this).clone(true);break;
                case 3: click_elem = $(this).clone(true);break;
            }
            
            
            $("body").append(click_elem);
            target.vx = event.clientX-parseInt(click_elem.css("left"));
            target.vy = event.clientY-parseInt(click_elem.css("top"));
            document.addEventListener("mousemove",mousemove);
            event.preventDefault();
        });

        $("div").bind("mouseup",function(event){
            
            switch(type){
                case 1: click_oldelem = null;click_elem = null;break;
                case 2: click_oldelem = null;click_elem = null; break;
                case 3: click_oldelem.animate({left:target.x-target.vx,top:target.y-target.vy},500,function(){click_oldelem.remove();click_oldelem = null;});break;
            }
            
            
            document.removeEventListener("mousemove",mousemove);
            event.preventDefault();
        });

        function mousemove(event){
            if(click_elem){
                target.x = event.clientX
                    target.y = event.clientY;
                click_elem.find("span:eq(0)").html(target.x);
                click_elem.find("span:eq(1)").html(target.y);
                click_elem.css({
                    left:target.x-target.vx,
                    top:target.y-target.vy
                });
                event.preventDefault();
            }
        }

    </script>
</body>
</html>